<template>
  <view class="container">
    <u-navbar :autoBack="true" title="编辑账户" :bgColor="theme.subColor" placeholder></u-navbar>
    <view class="content">
      <button class="user-avatar" open-type="chooseAvatar" @chooseavatar="onSelectAvatar">
        <image class="avatar" :src="form.avatar_url" mode="aspectFill" />
        <!-- <image class="avatar" :src="avatar" mode="scaleToFill" /> -->
      </button>

      <view style="margin-top: 26rpx; font-size: 28rpx">点击修改头像</view>
      <view class="info-cell">
        <view class="inputiem">
          <view style="font-size: 32rpx; width: 128rpx">昵称</view>
          <input
            class="weui-input"
            id="nickname-input"
            :placeholder-style="{ color: '#c0c4cc', fontSize: 14 }"
            v-model="form.name"
            maxlength="10"
            type="nickname"
            placeholder="请输入昵称"
          />
          <!-- :value="form.name" -->
          <!-- <u-input placeholder="请输入昵称" border="none" v-model="form.name" @change="change">
            <template slot="prefix">
              <view style="font-size: 28rpx; width: 118rpx">昵称</view>
            </template>
          </u-input> -->
        </view>
        <view class="inputiem" style="margin-top: 32rpx">
          <u-input
            placeholder="请点击授权"
            border="none"
            disabled
            disabledColor="rgba(0,0,0,0)"
            v-model="form.mobile"
            @change="change"
          >
            <template slot="prefix">
              <view style="font-size: 32rpx; width: 118rpx">手机号</view>
            </template>
            <template slot="suffix">
              <u-code
                ref="uCode"
                @change="codeChange"
                seconds="5"
                startText="授权获取手机号"
                changeText="X秒重新获取"
              ></u-code>
              <button
                class="btnstyle"
                open-type="getRealtimePhoneNumber"
                @getrealtimephonenumber="getrealtimephonenumber"
              >
                授权获取手机号
              </button>
            </template>
          </u-input>
        </view>
        <!-- <view class="info-label">用户昵称：</view>
        <input type="name" @blur="onInput" v-model="form.name" placeholder="请输入昵称" /> -->
      </view>
      <view style="width: 366rpx">
        <u-button
          style="box-shadow: 0px 1px 8px rgba(10, 63, 255, 0.35); font-size: 32rpx"
          :customStyle="{
            background: theme.mainColor,
            color: '#fff',
            marginTop: '108rpx',
            border: 'none',
            borderRadius: '12rpx',
          }"
          :loading="btnLoading"
          loadingMode="circle"
          type="primary"
          text="确认"
          @click="onSubmit"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import logo from '@/static/svg/logo.svg'
import { uploadFile, updateUserInfo, fileOss } from '@/network/api'
import { getMobile } from '@/network/api'
export default {
  options: {
    styleIsolation: 'shared',
  },
  data() {
    return {
      temp: {},
      form: {
        avatar_url: '',
        name: '',
        mobile: '',
        uploadAvater: '',
      },
      btnLoading: false,
    }
  },
  async onLoad() {
    this.form.name = this.userInfo.name
    this.form.mobile = this.userInfo.mobile
    // this.form.avatar_url = this.userInfo.avator_url
  },
  computed: {
    theme() {
      return this.$store.state.config.theme
    },
    userInfo() {
      return this.$store.state.auth.userInfo
    },
    avatar() {
      return this.form.avatar_url || this.userInfo.avator_url || logo
    },
  },
  watch: {
    userInfo: {
      handler() {
        this.form.name = this.userInfo.name
        this.form.avatar_url = this.userInfo.avator_url
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async onSelectAvatar(e) {
      console.log(e)
      // return
      this.form.avatar_url = e.detail.avatarUrl
      uni.showLoading({ title: '上传中', mask: true })
      try {
        const res = await uploadFile(this.form.avatar_url)
        console.log(res)
        this.form.avatar_url = res.link
        uni.hideLoading()
      } catch (err) {
        console.log(err)
        uni.showToast({ title: '上传失败', icon: 'none' })
        uni.hideLoading()
      }
    },
    onSubmit() {
      uni
        .createSelectorQuery()
        .in(this) // 注意这里要加上 in(this)
        .select('#nickname-input')
        .fields({
          properties: ['value'],
        })
        .exec((res) => {
          this.form.name = res?.[0]?.value
          console.log('昵称', this.form.name)
        })
      setTimeout(() => {
        this.$nextTick(async () => {
          if (!this.form.name) {
            uni.showToast({ title: '请输入昵称', icon: 'none' })
            return
          }
          this.btnLoading = true
          try {
            await updateUserInfo(this.form)
            await this.$store.dispatch('getUserInfo', { statistic_data: [1, 2, 3, 4] })
            uni.showToast({ title: '修改成功' })
            uni.navigateBack()
          } finally {
            this.btnLoading = false
          }
        })
      }, 200)
    },
    change(e) {
      console.log(e, this.form.name)
    },
    getRealtimePhoneNumber(e) {
      // console.log(e)
    },
    getrealtimephonenumber(e) {
      setTimeout(async () => {
        this.$refs.uCode.start()
        const res = await getMobile({ code: e.detail.code })
        console.log(res)
        this.form.mobile = res.mobile
      })

      // uni.login({
      //   provider: 'weixin',
      //   success: async (loginRes) => {

      //   },
      // })
    },
  },
}
</script>

<style scoped lang="scss">
.btnstyle {
  width: 224rpx;
  height: 56rpx;
  border-radius: 8rpx;
  color: $main-color;
  font-size: 28rpx;
  background: rgba(209, 218, 255, 1);
  padding: 0 !important;
  line-height: 56rpx;
}
.btnstyle::after {
  border: none;
}
.container {
  width: 100%;
  min-height: 100vh;
  background: $sub-color;
}
.weui-input {
  font-size: 28rpx;
}
.content {
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // margin: 32rpx;
  margin-top: 80rpx;
  padding: 32rpx;
  box-sizing: border-box;
  .user-avatar {
    width: 198rpx;
    height: 198rpx;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10rpx 2rpx rgba($color: #000, $alpha: 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    &::after {
      display: none;
    }
    .avatar {
      width: 198rpx;
      height: 198rpx;
      border-radius: 20rpx;
    }
  }
  .info-cell {
    width: 100%;
    margin-top: 88rpx;
    .inputiem {
      height: 96rpx;
      width: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      box-sizing: border-box;
    }
    .info-label {
      flex-shrink: 0;
      color: #666;
      margin-right: 20rpx;
    }
  }
}
::v-deep .u-button__text {
  font-size: 32rpx !important;
}
</style>
